<!--
 * @Description: 订单详情页面
 * @Author: xinxin
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: xinxin
 * @LastEditTime: 2022-05-17 16:08:30
-->
<template>
  <div>
    <!-- 头部  -->
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      />

    <div>
    <!--  -->
    <!-- {{orderproductData}} -->
      <van-card v-for="item in orderproductData" :key="item.id"
      :price="item.price"
      :desc="item.description"
      :title="item.name"
      :thumb="item.photo"
      num="1"
/>
    </div>

    <div class="total" >
      <!-- {{priceData}} -->
        <p v-for="item in priceData" :key="item.id">
          总计:<span style="color: red;">￥{{item.total}}</span>
        </p>
    </div>

<!-- 地址 -->
    <div class="add">
      <!-- {{orderData}} -->
      <tr v-for="item in orderData" :key="item.id">
        <td>
          服务地址：{{item.address.province}}{{item.address.city}}{{item.address.area}}{{item.address.address}}
        </td>
        <td>
          联系方式：{{item.customer.username}}({{item.customer.telephone}})
        </td>
        <td>
           下单时间：{{ item.serviceTime | dateFormat}} 
        </td>
        <td>
          服务时间：{{ item.orderTime | dateFormat}}
        </td>
        <!-- <td class="right">
          {{item.status}}
        </td> -->
      </tr>
      <div class="status">
        <p v-for="item in orderData" :key="item.id">
          {{item.status}}
        </p>
      </div>

    </div>

  </div>
</template>

<script>
//导入
import {pageQueryOrder,pageQueryProduct} from "@/api/index.js";
export default {
  data() {
    return {   
      activeKey:0,
      //订单的数据
      orderData:[],
      //订单详情页的产品
      orderproductData:[],
      //价格数据
      priceData:[],
    };
  },
  computed: {},
  methods: {
    //获取订单数据
    async loadOrder(){
      let res = await pageQueryOrder({page:1,pageSize:1});
      //console.log(res);
      // 将响应中的合适数据设置到数据模型中
      this.orderData = res.data.data.list;

      // 做上一页面的参数的数据比对，设置activeKey
      // 获取上个页面带过来的参数id   $router路由控制器   $route当前路由对象
      console.log(this.$route.query.id);
      // 箭头函数，遍历数组，与id值进行匹配，匹配上了获取下标，设置到activeKey
      this.orderData.forEach((item, index) => {
        if (item.id == this.$route.query.id) {
          this.activeKey = index;
        }
        });
    },

    //获取产品数据
    async loadProduct(){
      let res = await pageQueryProduct({page:12,pageSize:1 });
      console.log(res);
      this.orderproductData = res.data.data.list;
    },

    //获取价格数据
    async loadPrice(){
      let res = await pageQueryOrder({page:1,pageSize:1})
      //console.log(res);
      this.priceData = res.data.data.list;
    }

  },
  created() {
    this.loadOrder();
    this.loadProduct();
    this.loadPrice();
  },
  mounted() {}
};
</script>
<style scoped>
.van-card{
  background-color: white;
  box-shadow: 1px 1px 1px 1px rgb(143 66 255 / 40%);
  border-radius: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.total{
  margin: 15px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid #f8f8f8;
}
.total p{
  font-size: 12px;
  margin: 12px 0px;
  text-align: right;
}

.add{
  background-color: #f8f8f8;
  padding: 16px 8px;
}
.add td{
  margin: 0px 0px 6px;
  display: block;
  font-size: 12px;
  color: #999999;
} 
.status p{
  margin: 0px 0px 6px;
  display: block;
  font-size: 12px;
  color: #999999;
  text-align: right;
}
</style>  